<template>
  <div id="Detail">
    <detail-nav-bar></detail-nav-bar>
    <detail-swiper :topImages="topImages"></detail-swiper>
    <detail-base-info :goods="goodsInfo"></detail-base-info>
    <detail-shop-info :shop="shop"></detail-shop-info>
    <detail-goods-info :detailgoodsinfo="detailInfo"></detail-goods-info>
    <detail-bottom-bar @addCart="addToCart"></detail-bottom-bar>
  </div>
  
</template>

<script>
    import DetailNavBar from './DetailNavBar'
    import {getDetail,Goods,Shop} from '../../network/detail'
    import DetailSwiper from './DetailSwiper'
    import DetailBaseInfo from './DetailBaseInfo'
    import DetailShopInfo from './DetailShopInfo'
    import DetailGoodsInfo from './DetailGoodsInfo'
    import DetailBottomBar from './DetailBottomBar'

export default {
  name: "Detail",
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailBottomBar
  },
  data(){
      return{
          iid:null,
          topImages:[],
          goodsInfo:{},
          shop:{},
          detailInfo:{}
      }
  },
  created () {      
      this.iid = this.$route.params.iid,
      getDetail(this.iid).then(res=>{
          console.log('----Detail-----',res);
        //获取顶部的图片轮播数据
        const data = res.data.result
         this.topImages = data.itemInfo.topImages
          
         //获取商品信息
        this.goodsInfo = new Goods(data.itemInfo,data.columns,data.shopInfo.services)
        
        //获取店铺信息
        this.shop = new Shop(data.shopInfo)
        console.log('shop',this.shop);
        
        //获取商品详情数据
        this.detailInfo = data.detailInfo
        console.log('detailInfo',this.detailInfo);
        
      })
  },
  methods:{
    addToCart(){
        const product ={}
          product.image = this.topImages[0]
          product.titile = this.goodsInfo.title
          product.desc = this.goodsInfo.desc
          product.price = this.goodsInfo.newPrice
          product.iid = this.iid
        
        //将商品添加到store中
        this.$store.commit('addCart',product)
    }
  }
};
</script>

<style scoped>
  .abc{
    width: 100%
  }
</style>